<template>
	
	<view class="p-l-40 p-r-40 ">
		<uni-nav-bar statusBar left-icon="left" @clickLeft="navBack" fixed backgroundColor='#3f6efe' color='#fff'>
			<view class="w-100p flex-c flex-aic f-28">{{title}}</view>
		</uni-nav-bar>
		<uni-forms class='m-t-40' ref="baseForm" :label-width='90' :rules="rules" :modelValue="form">
			<uni-forms-item label="使用时间" name='use_time' required>
				<uni-datetime-picker type="datetime" return-type="timestamp" v-model="form.use_time" />
			</uni-forms-item>
			<uni-forms-item label="金额" name="price" required>
				<uni-easyinput v-model="form.price" placeholder="请输入金额" type="digit"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="报账分类" name='type_id' required>
				<uniDataSelect v-model="form.type_id" :localdata="seleList" @change="SelectChange"></uniDataSelect>
			</uni-forms-item>
			<uni-forms-item label="图片上传">
				<htzImageUpload :headers="{
					Authorization:token
				}" :uploadSuccess="zidingyiSuccess" :max='9'  @imgDelete='imagesDelete' :action='$http.config.baseURL+"/upload"' :value="form.images" ></htzImageUpload>
			</uni-forms-item>
			<uni-forms-item label="备注" name='detail' required>
				<uni-easyinput :maxlength='255' type="textarea" v-model="form.detail" placeholder="请输入备注" />
			</uni-forms-item>
		</uni-forms>
		
		<button class="m-t-100" type="primary" @click="postForm">提交</button>
	</view>
</template>

<script>
	import uniDataSelect from '@/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue'
	import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
	import {baseurl} from '@/config.js'
	export default {
		components: {
			uniDataSelect,
			htzImageUpload
		},
		
		data() {
			return {
				title:'',
				token:uni.getStorageSync('token'),
				id:'',
				form: {
					use_time: '',
					detail: '',
					type_id: '',
					price: '',
					images: [],
				},
				rules: {
				
					use_time: {
						rules: [{
							required: true,
							errorMessage: '请选择使用时间',
						}]
					},
					price: {
						rules: [{
							required: true,
							errorMessage: '请输入金额',
						}]
					},
					type_id: {
						rules: [{
							required: true,
							errorMessage: '请输入选择分类',
						}]
					},
					detail: {
						rules: [{
							required: true,
							errorMessage: '请输入备注',
						}]
					}

				},
				seleList: [], //报账列表
			}
		},
		onLoad(e) {
			this.id = e.id
			if (this.isTrue) {
				let title = '编辑报账'
				uni.setNavigationBarTitle({
					title
				})
				this.title = title
				this.getDetail()
				
			} else {
				let title = '新增报账'
				uni.setNavigationBarTitle({
					title
				})
				this.title = title
			}
			this.getseleType()
		},
		computed:{
			isTrue(){
				if(this.id){
					return true
				}else{
					return false
				}
			}
		},
		methods: {
			getDetail(){
				this.$http.get('/reimbursement/detail',{
					params:{
						id:this.id
					}
				}).then(res=>{
					this.form = res.data
				})
			},
			imagesDelete(e){
				this.form.images = e.tempFilePaths
			},
			
			zidingyiSuccess(e){
				let res = JSON.parse(e.data)
			  if(res.code ===200){
				  return{
					  success:true,
					  url:res.data.url
				  }
			  }else{
				  return{
					  success:false,
					  url:""
				  }
			  }
			},
			select(e) {
				this.$refs.files.upload()
				return false
				for (let i = 0; i < e.tempFiles.length; i++) {
					this.$http.upload('/upload', {
						name: 'file',
						filePath:e.tempFiles[i].file.path
					}).then(res => {
					
					})
				}
			},
			postForm() {
				let that = this;
				this.$refs.baseForm.validate().then(res => {
					let obj = this.form
					let url = ''
					if(this.isTrue){//编辑
						url = '/reimbursement/update'
					}else{//新增
						url = '/reimbursement/create'
					}
					this.$http.post(url,obj).then(res => {
						uni.showToast({
							title: res.message,
							success() {
								let time = setTimeout(function() {
									uni.navigateBack({
										success() {
											if(that.isTrue){
												uni.$emit('reload',res.data)
											}else{
												uni.$emit('add',res.data)
											}
										}
									})
									clearTimeout(time)
								})
							}
						})
					})
				  
				})
			},
			getseleType() { //获取所有分类
				this.$http.get('/type').then(res => {
					let list = []
					res.data.map(item => {
						list.push({
							value: item.id,
							text: item.type
						})
					})
					this.seleList = list
				})
			},
			creteChange(e) {
				console.log(e)
			},
			SelectChange(e) { //下拉选择

			}
		}
	}
</script>

<style>
	page {
		background-color: white;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	/deep/ .htz-image-upload-Item-del{
		z-index:1 !important;
	}
</style>
